<template>
  <div class="container-main">
    <div class="bread" style="height: 50px;background: 	#77DDFF">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item style="font-weight: bold;">公司后端</el-breadcrumb-item>
        <el-breadcrumb-item style="font-weight: bold;">简历管理</el-breadcrumb-item>
        <el-breadcrumb-item style="font-weight: bold;">历史简历</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          label="投递人"
          prop="resume.name"
          width="120">
      </el-table-column>
      <el-table-column  label="形象" width="112">
        <template slot-scope="scope">
          <img :src="scope.row.resume.picture" width="100" height="100" class="cover"/>
        </template>
      </el-table-column>
      <el-table-column
          label="目标岗位"
          prop="jobDto.title"
          width="120">
      </el-table-column>
      <el-table-column
          label="学历"
          prop="resume.background"
          width="120">
      </el-table-column>
      <el-table-column
          label="投递时间"
          prop="deliverTime"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="管理"
          width="100">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="openResume(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column
          label="岗位要求"
          prop="jobDto.requests"
          width=580px>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="totalPages"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        style="height: 83px"
    >
    </el-pagination>
    <el-dialog
        :visible.sync="ResumeDialogVisible"
        style="margin-top: -130px;margin-left: 100px"
        width="70%"
    >
      <embed :src="ResumePDFUrl" type="application/pdf" width="100%" height="600px"/>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

  </div>
</template>


<script>
import axios from "axios";
import AnnounceJobs from "@/components/company/announceJobs.vue";

export default {
  components: {AnnounceJobs},
  data() {
    return {
      currentResume:{},
      ResumePDFUrl:'',
      ResumeDialogVisible: false,
      UpdateDialogVisible: false,
      tableData: [],
      currentPage: 1,
      pageSize: 4,
      totalPages: 1,
    }
  },
  methods: {
    openResume(row) {
      this.ResumeDialogVisible = true;
      this.currentResume=row.resume;
      this.ResumePDFUrl = row.resume.resumeUrl;
      console.log(this.ResumePDFUrl);
    },

    fetchTableData() {
      axios.get(`/api/resume/getResumeJobResponse/${this.$store.state.companyId}/1`).then(resp => {
        const allData = resp.data;
        this.totalPages = Math.ceil(allData.length);
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        this.tableData = allData.slice(startIndex, endIndex).map(item => {
          return {
            ...item,
            salary: `${item.salaryL}k - ${item.salaryR}k`
          };
        });
      }).catch(error => {
        console.error("获取简历与职位关联数据出错：", error);
      });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchTableData();
    },
    handleClick(row) {
      axios.get(`/api/company/${row.id}/1`).then(resp => {
        this.fetchTableData();
      }).catch(err => {
        this.fetchTableData();
      })

    },
  },
  mounted() {
    this.fetchTableData();
  }
}

</script>
<style>
.bread {
  height: 50px;
  display: flex;
  align-items: center;
}

.container-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.el-table {
  flex: 1;
  width: 100%;
}
</style>
